<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <style type="text/css">
        header { margin: 15px 0; border-bottom: 1px solid #dfdfdf;}
    </style>
</head>
<body>

    <header>
        <a href="index.html">返回首页</a>
    </header>

    <!-- 根组件的挂载点 -->
    <div id="root"></div>

    <script src="vue.global.js"></script>

    <script>

        const controller = {
            template: `<div>
                            <button @click="increase">增加</button>
                            <button @click="decrease">减少</button>
                       </div>`,
            methods: {
                increase(evt){
                    // 主动触发 input 
                    this.$emit( 'input' , 250 );
                },
                decrease(){
                    this.$emit( 'input' , -250 );
                }
            }
        }

        const options = {
            template: `<div>
                          <p>count: {{ count }}</p>
                          <kaifamiao-controller v-model="count" @input="handler"></kaifamiao-controller>
                       </div>`,
            data(){
                return { count: 0 }
            },
            methods: {
                handler(...params){
                    console.log( 'handler: ' , ...params );
                }
            },
            components: {
                'kaifamiao-controller': controller
            }
        }

        const app = Vue.createApp(options);
        const root = app.mount('#root');
    </script>
    
</body>
</html>